<html lang="en-us">
  <head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-WBBW2LN');</script>
    <!-- End Google Tag Manager -->
    <link rel="icon" type="image/png" href="./favicon.png" />
    <link rel="canonical" href="https://hasura.io/learn/graphql/graphiql" />
    <title>GraphiQL Online with Headers | Built by Hasura</title>
    <meta name="title" content="GraphiQL Online with Headers | Built by Hasura" />
    <meta name="description" content="An online version of GraphiQL. Manage headers easily. Test your GraphQL servers" />
    <meta name="robots" content="noindex">
    <script>
      window.__env = {
        graphqlEndpoint: 'https://hasura.io/learn/graphql',
        callbackUrl: 'https://hasura.io/learn/graphql/graphiql/callback',
        headers: '',
        variables: '',
        query: ''
      };
    </script>
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBBW2LN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    <style>
    .mainContent {
      display: 'none';
      opacity: 0;
      transition: opacity .20s linear;
    }
    .mainContent.show {
      display: 'block';
      opacity: 1;
      transition: opacity .20s linear;
    }
    </style>

    <div id="loading">
      <div class="page-loading" style="
      min-height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      font-family: sans-serif;
      justify-content: center;
      ">
        <span class="" style="
        font-size: 2em;
        margin-top: -3em;
        color: #848484;
        ">
        Loading...
      </span>
      </div>
    </div>
    <div id="content" class="mainContent"></div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

    <link rel="stylesheet" href="https://graphql-engine-cdn.hasura.io/learn-hasura/graphiql/main.css" charset="UTF-8"/>
    <script src="https://graphql-engine-cdn.hasura.io/learn-hasura/graphiql/vendor.js" charset="UTF-8"></script>
    <script src="https://graphql-engine-cdn.hasura.io/learn-hasura/graphiql/main.js" charset="UTF-8"></script>

  </body>
</html>
